<?php $this->beginBlock('cssHeaderFile')?>
<link href="/static/plugins/mdeditor/css/editormd.preview.min.css" rel="stylesheet">
<?php $this->endBlock()?>

<?php $this->beginBlock('cssHeaderText')?>
<style>
    .editormd-html-preview table thead tr, .editormd-preview-container table thead tr{
        background: #337ab7;
        color: #fff;
    }
</style>
<?php $this->endBlock()?>
<?php $this->beginBlock('isLeft')?>
<span class="slidebar" id="slidebar"><i class="fa fa-align-justify"></i></span>
<?php $this->endBlock()?>

<?php $this->beginBlock('isLogin')?>
<!--页面右侧-->
<div class="navbar-header pull-right manual-menu">
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                <?=!Yii::$app->user->isGuest ? Yii::$app->user->identity->username :'个人中心'?> <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#" title="基本资料">基本资料</a> </li>
                <li><a href="<?=\yii\helpers\Url::toRoute(['ucenter/index'])?>" title="我的项目">我的项目</a> </li>
                <li><a href="/" title="返回首页">返回首页</a> </li>
                <?php if (!Yii::$app->user->isGuest):?>
                    <li class="divider"></li>
                    <li><a href="<?=\yii\helpers\Url::toRoute(['ucenter/logout'])?>"> 退出登录</a></li>
                <?php endif;?>
            </ul>
        </li>
    </ul>
</div>
<?php $this->endBlock()?>

<?php $this->beginBlock('pageTitle')?>
<a href="<?=\yii\helpers\Url::toRoute(['docs/index','projectId' => (isset($projectInfo['id']) ? $projectInfo['id'] : '')]) ?>" title="<?=$projectInfo['name']?>" class="book-title">
    <?php echo isset($projectInfo['name']) ? $projectInfo['name'] : '未命名标题'?>
</a>
<?php $this->endBlock()?>

<article class="container-fluid manual-body">
    <div class="manual-left">
        <?php if ($hasAuth):?>
        <div class="btn-group btn-group-justified" role="group" style="margin-top: 3px;">
            <a style="border-radius: 0px" href="#" class="btn btn-primary" role="button" data-toggle="modal" data-target="#myCateModal">
                <i class="glyphicon glyphicon-level-up"></i> 添加目录
            </a>
            <a style="border-radius: 0px" href="<?=\yii\helpers\Url::toRoute(['docs/operate','projectId' => (isset($projectInfo['id']) ? $projectInfo['id'] : '')])?>" class="btn btn-primary" role="button">
                <i class="glyphicon glyphicon-file"></i> 添加文档
            </a>
        </div>
        <?php endif;?>
        <div class="manual-tab" style="top: <?=$hasAuth ? '40px' : '5px'?>">
            <div class="tab-navg">
                <span data-mode="view" class="navg-item active"><i class="fa fa-align-justify"></i><b class="text">目录</b></span>
                <span data-mode="search" class="navg-item"><i class="fa fa-search"></i><b class="text">搜索</b></span>
            </div>
            <div class="tab-util">
                <span class="manual-fullscreen-switch">
                    <b class="open fa fa-angle-right" title="展开"></b>
                    <b class="close fa fa-angle-left" title="关闭"></b>
                </span>
            </div>

            <!--左侧容器-->
            <div class="tab-wrap">

                <!--树状图形-->
                <div class="tab-item manual-catalog">
                    <div class="catalog-list read-book-preview" id="sidebar"></div>
                </div>

                <!--搜索部分-->
                <div class="tab-item manual-search">
                    <div class="search-container">
                        <div class="search-form">
                            <div class="form-group">
                                <input type="search" placeholder="请输入搜索关键字" class="form-control" name="keyword">
                                <button type="submit" class="btn btn-default btn-search" onclick="dataOperate.searchData()">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                        <div class="search-result">
                            <div class="search-empty">
                                <i class="fa fa-search-plus" aria-hidden="true"></i>
                                <b class="text">暂无数据</b>
                            </div>
                            <ul class="search-list" id="searchList"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="m-copyright">
            <p>
                本文档使用 <a href="#" target="_blank">FankersDoc</a> 发布
            </p>
        </div>
    </div>
    <div class="manual-right">
        <div class="manual-article" id="myArticle">

            <div class="article-head">
                <div class="container-fluid">
                    <div class="row" v-if="isShow">
                        <div class="col-sm-11 text-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#shareProject" @click="share()">分享</button>
                                <button v-if="hasAuth && isShow" type="button" class="btn btn-primary" @click="skipGo()">编辑</button>

                                <div v-if="hasAuth && isShow" class="btn-group" role="group">
                                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        更多
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">删除</a></li>
                                        <li><a href="#">复制</a></li>
                                        <li><a href="#">详情</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h1 id="article-title" v-text="title"></h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="article-content">
                <div class="article-body  markdown-body editormd-preview-container"  id="page-content">
                    <p id="MyContent" style="padding:0px">
                        <textarea style="display:none;" name="MyContent-markdown-doc" v-text="content"></textarea>
                    </p>
                </div>

                <div class="jump-top">
                    <a href="javascript:;" class="view-backtop"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
                </div>
            </div>

        </div>
    </div>
</article>

<div class="manual-progress"><b class="progress-bar"></b></div>

<!-- Modal -->
<div class="modal fade" id="myCateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" v-text="title"></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form id="myProjectForm" onsubmit="return false;">
                        <input name="" type="hidden" value="">
                        <input name="id" type="hidden" value="">
                        <input name="projectId" type="hidden" value="">
                        <div class="col-sm-12">
                            <div class="input-group">
                                <span class="input-group-addon">项目</span>
                                <input type="text" name="projectName" readonly class="form-control" value="<?=isset($projectInfo['name']) ? $projectInfo['name'] : ''?>" placeholder="项目名称">
                            </div>
                        </div>

                        <div class="col-sm-12 m-t-20">
                            <div class="input-group">
                                <span class="input-group-addon">序号</span>
                                <input type="text" name="sort" v-model="cateInfo.sort" class="form-control" placeholder="序号：0/1/2等">
                            </div>
                        </div>

                        <div class="col-sm-12 m-t-20">
                            <div class="input-group">
                                <span class="input-group-addon">名称</span>
                                <input type="text" name="name" v-model="cateInfo.name" class="form-control" placeholder="分类名称">
                            </div>
                        </div>
                        <div class="col-sm-12 m-t-20">
                            <div class="input-group">
                                <span class="input-group-addon">描述</span>
                                <textarea class="form-control" name="desc" v-model="cateInfo.desc" placeholder="分类描述"></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12 m-t-20">
                            <div class="input-group">
                                <span class="input-group-addon">上级</span>
                                <select class="form-control" v-model="pid">
                                    <option value="0">无</option>
                                    <option v-for="(item,index) in baseCate" :value="item.id" v-text="item.name"></option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                <button type="button" class="btn btn-primary" @click="saveCate()">保 存</button>
            </div>
        </div>
    </div>
</div>


<?php $this->beginBlock('jsFooterFile')?>
<!--markdown相关js-->
<script src="/static/plugins/mdeditor/lib/marked.min.js"></script>
<script src="/static/plugins/mdeditor/lib/prettify.min.js"></script>
<script src="/static/plugins/mdeditor/lib/raphael.min.js"></script>
<script src="/static/plugins/mdeditor/lib/underscore.min.js"></script>
<script src="/static/plugins/mdeditor/lib/sequence-diagram.min.js"></script>
<script src="/static/plugins/mdeditor/lib/flowchart.min.js"></script>
<script src="/static/plugins/mdeditor/lib/jquery.flowchart.min.js"></script>
<script src="/static/plugins/mdeditor/editormd.js"></script>

<?php $this->endBlock()?>

<?php $this->beginBlock('jsFooterText')?>
<script>
    var vue = new Vue({
        el:"#myArticle",
        data:{
            isShow:false,
            pageId:"",
            title:"<?= isset($detail['page_title']) ? $detail['page_title'] : (isset($projectInfo['name']) ? $projectInfo['name'] : '');?>",
            content:"<?= isset($detail['content']) ? $detail['content'] : (isset($projectInfo['desc']) ? $projectInfo['desc'] : '');?>",
            hasAuth:'<?=isset($hasAuth) ? $hasAuth : false;?>',
            shareProject:'',
            sharePage:''
        },
        methods:{
            skipGo:function () {
                window.location.href="<?=\yii\helpers\Url::toRoute(['docs/operate','projectId' => $projectInfo['id']])?>&pageId="+this.pageId;
            },
            share:function () {

                // 项目分享
                $("#shareProjectImg").attr('src','<?=\yii\helpers\Url::toRoute(['api/qrcode/url'])?>?url='+this.shareProject);
                $("input[name=shareProjectUrl]").val(this.shareProject);


                $("#sharePageImg").attr('src','<?=\yii\helpers\Url::toRoute(['api/qrcode/url'])?>?url='+this.sharePage);
                $("input[name=sharePageUrl]").val(this.sharePage)
            }
        }
    });

    // 弹窗相关
    var cateVue = new Vue({
        el:"#myCateModal",
        data:{
            ajaxLock :false,
            cateInfo:<?=isset($cateInfo) ? json_encode($cateInfo,true) : '{}'?>,
            pid:"<?=isset($cateInfo['id']) ? $cateInfo['id'] : ''?>",
            is_public:"<?=isset($cateInfo['is_public']) ? $cateInfo['is_public'] : ''?>",
            baseCate:<?=isset($baseCate) && !empty($baseCate) ? json_encode($baseCate,true) : '{}';?>,
        },
        computed:{
            title:function () {
                return typeof this.cateInfo.id === 'undefined' ? '添加目录' : '编辑目录';
            },
            baseCateLength:function () {

            }
        },
        methods:{
            saveCate:function () {
                that = this;
                var sendData = that.cateInfo;
                sendData['<?=Yii::$app->request->csrfParam?>'] = '<?=Yii::$app->request->csrfToken?>';
                sendData['projectId'] = <?=isset($projectInfo['id']) ? $projectInfo['id'] : ''?>;
                sendData['pid'] = that.pid;

                if (that.ajaxLock)return false;
                that.ajaxLock = true;
                $.ajax({
                    type:'post',
                    url:"<?=\yii\helpers\Url::toRoute(['category/save'])?>",
                    data:sendData,
                    dataType:'json',
                    success:function (resp) {
                        that.ajaxLock = false;
                        if (resp.e === '0'){
                            layer.msg(resp.m, {icon: 6});
                            $('#myCateModal').modal('hide');
                            window.location.reload();
                        } else {
                            layer.msg(resp.m, {icon: 5});
                        }
                    },
                    error:function (err) {
                        layer.msg("服务器正忙，请稍后重试", {icon: 5});
                        that.ajaxLock = false;
                    }
                });

            },
        }
    });

    // markdown 格式化markedown语法
    var EditormdView;
    EditormdView = editormd.markdownToHTML("MyContent", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        tocm            : true,
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true  // 默认不解析
    });

    // 初始化左侧目录树
    window.jsTreeView = $("#sidebar").treeview({
        emptyIcon:'glyphicon glyphicon-minus',
        data:'<?=isset($category) && !empty($category) ? json_encode($category,true) : ''?>',
        onNodeSelected: function(event, data) {
            if (typeof data.href === 'undefined'){
                layer.msg('弄啥类，非法请求', {icon: 5});
                return false;
            }

            if (typeof data.type !=='undefined' && data.type ==='page'){
               // window.location.href = data.href;
                $.ajax({
                    type:'get',
                    url:data.href,
                    dataType:'json',
                    success:function (resp) {
                        if (resp.d.id)vue.isShow = true;
                        if (resp.d.id)vue.pageId = resp.d.id;
                        if (resp.d.Project)vue.shareProject = resp.d.Project;
                        if (resp.d.Page)vue.sharePage = resp.d.Page;

                        vue.title = resp.d.page_title;
                        $("#MyContent").html("<textarea style=\"display:none;\" name=\"MyContent-markdown-doc\">"+resp.d.content+"</textarea>");

                        // 解析页面数据
                        editormd.markdownToHTML("MyContent", {
                            htmlDecode      : "style,script,iframe",  // you can filter tags decode
                            tocm            : true,
                            emoji           : true,
                            taskList        : true,
                            tex             : true,  // 默认不解析
                            flowChart       : true,  // 默认不解析
                            sequenceDiagram : true  // 默认不解析
                        });
                    },
                    error:function () {
                        
                    }
                });
            }
        },
        showBorder: false
    });

    // 自定义数据相关的操作
    var dataOperate = {
        searchData:function () {
            
        }
    };
</script>
<?php $this->endBlock()?>
